import React, { Component } from 'react'
// import { withRouter } from 'react-router-dom';
import { TabBar } from 'antd-mobile';



import Home from '@a/images/home/home.png'
import HomeActive from '@a/images/home/home-active.png'

import Msg from '@a/images/home/msg.png'
import MsgActive from '@a/images/home/msg-active.png'

import My from '@a/images/home/my.png'
import MyActive from '@a/images/home/my-active.png'

import HomePage from '../home/homepage/container/HomePage'
import MinePage from '../mine/container/MinePage'
import WecHat from '../xin/container/WecHat'
import { connect } from 'react-redux';
import {actionCreater as ac} from './homepage'
@connect(
    state => ({
        selectedTab:state.homepage.routeInfo.selectedTab
    }),
    dispatch => ({
        changeSelectedTab(selectedTab){
            dispatch(ac.changeSelectedTab(selectedTab))
        }
    }) 
)

class Nav extends Component {
    state = {
        selectedTab: this.props.selectedTab,
        hidden: false,
        fullScreen: true,
    }
    componentDidMount(){
        //跳转到登录页面
        // let { history } = this.props
        // this.state.userName || history.push('/login') 
    }


    
    render() {
        return (
            <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="首页"
                        key="home"
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${Home}) center center /  21px 21px no-repeat`
                        }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${HomeActive}) center center /  21px 21px no-repeat`
                        }}
                        />
                        }
                        selected={this.state.selectedTab === 'home'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'home',
                            });
                        }}
                    >
                        <HomePage {...this.props}></HomePage>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${Msg}) center center /  21px 21px no-repeat`
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${MsgActive}) center center /  21px 21px no-repeat`
                            }}
                            />
                        }
                        title="消息"
                        key="msg"
                        selected={this.state.selectedTab === 'msg'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'msg',
                            });
                        }}
                    >
                      <WecHat></WecHat>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={{ uri: `${My}` }}
                        selectedIcon={{ uri: `${MyActive}` }}
                        title="我的"
                        key="my"
                        selected={this.state.selectedTab === 'my'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'my',
                            });
                            this.props.changeSelectedTab('my')
                        }}
                    >
                        <MinePage></MinePage>
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}

export default Nav
